Parent | Child | Previous | Next
 

Configuring Alpha Anywhere SVG Javascript Charts

Description

Alpha Anywhere SVG chart examples follow one of two patterns:

var data = [];
var settings = {};

// generate the chart
var html = A5.chart.generate(data,settings);

or

var chart = {};
var settings = {};

// generate the chart
var html = A5.chart.generate(chart.data,settings);

The data-settings Pattern

The majority of the sample charts use the first pattern. The data array defines the points to plot on the chart. Data points can be statically defined as an array or dynamically computed from a JavaScript function, client-side data series, or another method. The settings object contains the chart configuration, including the chart size, type, labels, titles, colors, legend, and more. See "Configuring the settings Object" below for more information.

The chart-settings Pattern

The Pie Settings in Data and Bar Settings in Data use the second pattern. The chart - settings pattern simplifies configuring some settings for the Alpha Anywhere SVG chart. In addition to the data points to plot, you also define the chart's title, width, height, stretch behavior, and offsets (margins) in the chart object. These properties map to the appropriate property in settings. Properties you can set in chart include:

title

The chart's title, which is shown above the chart.

width

The chart's width. Width is a number. E.g., 800

height

The chart's height. Height is a number. E.g., 400

stretch

A true or false value that specifies whether or not the chart should expand or shrink to fill the available area.

offset

The margins of the chart. Labels, legends, and titles render in the chart margins.

top

The distance between the top of the chart and the top edge of the chart control.

bottom

The distance between the bottom of the chart and the bottom edge of the chart control.

left

The distance between the left of the chart and the left edge of the chart control.

right

The distance between the right of the chart and the right edge of the chart control.

data

An array of data points to plot on the chart.

value

The data's value. In the case of X-Y charts, value is the Y-axis value.

category

The category. In the case of X-Y charts, category is the X-axis value.

series

The data's series name. Used to group values along the X-axis in X-Y charts.

color

The color to use when rendering the data point.

label

The label to display for the data point. Optional. If not specified, the label is not displayed.

The properties defined in chart are mapped to corresponding properties in settings. Except for label, all properties are required if present in the Pie Settings in Data and Bar Settings in Data examples. If a property is not in the example, the property is not used.

Configuring the settings Object

The settings object defines all aspects of the chart. Properties for settings are documented in the A5.chart generate() method.

The specific properties you need to configure are dependent on the chart's type. The settings.output.render object defines how to generate the chart. settings.output.render.type defines the chart type. Charts can be one of four types:

"linear"

Charts that plot data along a single axis, such as a Linear chart displaying a single value as a bar (e.g., Progress bar chart).

"rect"

Charts that plot data along an X and Y axis (X-Y chart), such as Bar, Line, and Area charts.

"radial"

Gauge, Pie, and Donut charts.

"polar"

Polar charts. Polar charts have both an X and Y axis (X-Y chart).

The available settings for configuring each of these chart types are found in their corresponding A5.chart Definition Layer Object documentation:

Type
Definition Layer Object
linear

A5.chart.Definition Layer.Linear Object - Lists properties available for configuring linear charts.

rect

A5.chart.Definition Layer.Rect Object - Lists properties available for configuring rect charts.

radial

A5.chart.Definition Layer.Radial Object - Lists properties available for configuring radial charts.

polar

A5.chart.Definition Layer.Polar Object - Lists properties available for configuring polar charts.

The Definition Layer properties are set in the settings.output.render.layer object.

Customizing Titles and Legends

Titles and legends are added to a chart using annotations. Annotations are an array of A5.chart.guides.annotation objects. There are three types of annotations available:

"legend"

Displays the colors and names of each data series (e.g., bar chart) or data value (e.g., pie chart).

"line"

A line plotted across the chart, such as a threshold line.

"text"

Custom text to display on the chart, such as a chart title.

As with the Definition Layer, the properties for defining the annotations are found in their corresponding A5.chart.guides.annotation.Definition object:

Annotation Type
Annotation Definition Object
legend

A5.chart.guides.annotation.Definition Legend Object - Lists properties for defining a Legend.

line

A5.chart.guides.annotation.Definition Line Object - Lists properties for defining a Line.

text

A5.chart.guides.annotation.Definition Text Object - Lists properties for defining a text object.

  • Adding Legends

    Adding a legend can be as simple as adding an Annotation with type "legend" to settings. For example, to add a legend to the sample, you would add the highlighted text shown below to the settings.output.render.layer.annotations object:

    Pie Alpha Anywhere SVG Chart example extended to have a legend
    var data = [4,6,10,7,2];
var settings = {
    input: {
        map: {
            dimensions: [
                ['value',{
                        as: 'number',
                        stack: 'percent'
                    }]
            ]
        }
    },
    output: {
        render: {
            type: 'radial',
            offset: {top: 20, bottom: 10, left: 30, right: 30},
            width: 200,
            height: 200,
            stretch: false,
            layer: {
                value: {
                    marks: {
                        show: 'none'
                    }
                },
                point: {
                    type: 'bar',
                    margin: {major: 2},
                    fill: {
                        gradient: 'ltr'
                    },
                    label: {
                        location: 'outside',
                        html: '{Math.round(point.value.value-point.value.base)}%',
                        style: 'font-size: 60%;',
                        offset: {axis: 4}
                    }
                },
                annotations: [
                    {
                        type: 'text',
                        html: 'Sales',
                        style: 'font-size: 14pt;',
                        align: 'above',
                        location: {
                            top: '2px',
                            left: '50%'
                        }
                    },
                    {
                        type: 'legend'
                    }
                ]
            }
        }
    }
}

// generate the chart
var html = A5.chart.generate(data,settings);

    This is minimum you need to define to enable the legend.

    Pie JavaScript example with an added Legend
    Pie JavaScript example with an added Legend

  • Labels for the legend are determined from the data point's group name. If no group name is supplied, the labels are sequential numbers (0, 1, 2, 3, etc.).

More Information

For more information about settings, see A5.chart generate().

Videos

Webinar - Javascript Charting with the new AA SVG Charts

In this webinar, we recreate the example RGraph Javascript Chart shown in the "In-Depth Example - Chart Based on SQL Data" video using an Alpha Anywhere SVG chart. Alpha Anywhere SVG charts use a new charting library released in Alpha Anywhere 4.6.3.8 in October 2021.

This webinar does not cover creating the data series used to populate the chart. To learn more about the data series implementation used in this webinar, watch "In-Depth Example - Chart Based on SQL Data," linked below.

Download Webinar Component

Download In-Depth Example - Chart Based on SQL Data Component

2022-01-26